import { Checkbox, Form, InputNumber, Select } from "antd";
import type { FormatterConfig } from "./config";
import ArrayInput from "./ArrayInput";

interface FormatterProps {
    formatter?: FormatterConfig;
    onChange: (formatter: FormatterConfig) => void;
}

export default function Formatter(props: FormatterProps) {
    return (
        <Form labelCol={{ span: 3 }}>
            <Form.Item label="开启">
                <Checkbox checked={props.formatter?.enabled ?? false} onChange={e => {
                    e.stopPropagation();
                    let formatter = props.formatter;
                    if (formatter == undefined) {
                        formatter = {};
                    }
                    formatter.enabled = e.target.checked;
                    props.onChange(formatter);
                }} />
            </Form.Item>
            {(props.formatter?.enabled ?? false) == true && (
                <>
                    <Form.Item label="忽略路径">
                        <ArrayInput valueList={props.formatter?.ignore ?? []} onChange={value => {
                            let formatter = props.formatter;
                            if (formatter == undefined) {
                                formatter = {};
                            }
                            formatter.ignore = value;
                            props.onChange(formatter);
                        }} />
                    </Form.Item>
                    <Form.Item label="兼容格式错误">
                        <Checkbox />
                    </Form.Item>
                    <Form.Item label="缩进格式">
                        <Select value={props.formatter?.indentStyle ?? "tab"} style={{ width: "100px" }}
                            onChange={value => {
                                let formatter = props.formatter;
                                if (formatter == undefined) {
                                    formatter = {};
                                }
                                formatter.indentStyle = value;
                                props.onChange(formatter);
                            }}>
                            <Select.Option value="tab">tab键</Select.Option>
                            <Select.Option value="space">空格键</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="缩进大小">
                        <InputNumber precision={0} controls={false} value={props.formatter?.indentSize ?? 2} onChange={value => {
                            if (value != null) {
                                if (value >= 1) {
                                    let formatter = props.formatter;
                                    if (formatter == undefined) {
                                        formatter = {};
                                    }
                                    formatter.indentSize = value;
                                    props.onChange(formatter);
                                }
                            }
                        }} />
                    </Form.Item>
                    <Form.Item label="单行字符数">
                        <InputNumber precision={0} controls={false} value={props.formatter?.lineWidth ?? 80} onChange={value => {
                            if (value != null) {
                                if (value >= 10) {
                                    let formatter = props.formatter;
                                    if (formatter == undefined) {
                                        formatter = {};
                                    }
                                    formatter.lineWidth = value;
                                    props.onChange(formatter);
                                }
                            }
                        }} />
                    </Form.Item>
                </>
            )}
        </Form>
    );
}